<template>
	<view class="rate">
		<navbar :showBack="true">商品评价</navbar>
		<view class="evaluate-con">
			<view class="goodsStyle acea-row row-between">
				<view class="pic"><image :src="productDetail.productInfo.image" mode=""></image></view>
				<view class="text acea-row row-between">
					<view class="name line2">{{productDetail.productInfo.store_name}}</view>
					<view class="money">
						<view>￥{{productDetail.productInfo.price}}</view>
						<view class="num">x{{productDetail.cart_num}}</view>
					</view>
				</view>
			</view>
			<view class="score">
				<view class="item acea-row row-middle">
					<view>商品质量</view>
					<view class="starsList"><u-rate size="36" gutter="20" v-model="product_score"></u-rate></view>
				</view>
				<view class="item acea-row row-middle">
					<view>服务态度</view>
					<view class="starsList"><u-rate size="36" gutter="20" v-model="service_score"></u-rate></view>
				</view>
				<view class="textarea">
					<textarea value="" @input="input" placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~" />
					<view class="list acea-row row-middle">
						<view class="pictrue" v-for="(item,index) in pics" :key="index">
							<image :src="item" mode=""></image>
							<text class="iconfont icon-guanbi1 font-color" @click="delpics(index)"></text>
						</view>
						<view class="pictrue2 pictrue acea-row row-center-wrapper row-column" @click="uploadImg">
							<text class="iconfont icon-icon25201"></text>
							<view>上传图片</view>
						</view>
					</view>
				</view>
				<view class="evaluateBnt bg-color" @click="pingjia">立即评价</view>
			</view>
		</view>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "@/api/api.js";
	export default{
		data(){
			return{
				product_score:0,
				service_score:0,
				pics:[],
				comment:"",
				unique:"",
				productDetail:{}
			}
		},
		onLoad(e) {
			this.unique = e.unique
			this.init(e.unique)
		},
		methods:{
			init:function(unique){
				const that = this;
				api.order.orderProduct(unique).then(e=>{
					if(e.status == 200){
						that.productDetail = e.data
					}
				})
			},
			uploadImg:function(){
				const that = this;
				let pics = this.pics;
				api.upload.uploadImg("pinglunImg",1).then(e=>{
					if(e.status == 200){
						if(that.pics.length<3){
							pics.push(e.data.url);
							that.pics = pics;
						}else{
							uni.showToast({
								title:"最多三张图片",
								icon:"none"
							})
						}
					}else{
						uni.showToast({
							title:e.msg,
							icon:"none"
						})
					}
				})
			},
			pingjia:function(){ // 评价
				let params = {};
				params.product_score = this.product_score;
				params.service_score = this.service_score;
				params.pics = this.pics;
				params.comment = this.comment;
				params.unique = this.unique;
				console.log(params)
				api.order.orderComment(params).then(e=>{
					console.log(e)
					if(e.status == 200){
						uni.showToast({
							title:"评价成功",
							duration:800
						})
						setTimeout(()=>{
							uni.navigateBack({})
						},800)
					}else{
						uni.showToast({
							title:e.msg,
							icon:"none",
							duration:800
						})
					}
				})
			},
			delpics:function(idx){
				let pics = this.pics;
				pics.splice(pics,1)
				this.pics = pics;
			},
			input:function(e){
				this.comment = e.detail.value;
			}
		}
	}
</script>

<style>
	.rate .evaluate-con .goodsStyle{
		margin-top: 1rpx;
		background-color: #fff;
		padding: 22rpx 30rpx;
	}
	.rate .evaluate-con .goodsStyle .pic{
		width: 120rpx;
		height: 120rpx;
	}
	.rate .evaluate-con .goodsStyle .pic image{
		border-radius: 6rpx;
	}
	.rate .evaluate-con .goodsStyle .text{
		width: 545rpx;
		font-size: 28rpx;
		color: #999;
	}
	.rate .evaluate-con .goodsStyle .text .name{
		width: 360rpx;
		color: #282828;
		height: 80rpx;
	}
	.rate .evaluate-con .goodsStyle .text .money{
		text-align: right;
	}
	.rate .evaluate-con .goodsStyle .text .money .num{
		margin-top: 7rpx;
	}
	.rate .evaluate-con .score{
		background-color: #fff;
		border-top: 1rpx solid #f5f5f5;
		font-size: 28rpx;
		color: #282828;
		padding: 48rpx 30rpx 65rpx 30rpx;
	}
	.rate .evaluate-con .score .item:nth-child(n+2){
		margin-top: 30rpx;
	}
	.rate .evaluate-con .score .item .starsList{
		padding: 0 35rpx 0 40rpx;
	}
	.rate .evaluate-con .score .textarea{
		width: 690rpx;
		background-color: #fafafa;
		border-radius: 10rpx;
		margin-top: 48rpx;
	}
	.rate .evaluate-con .score .textarea textarea{
		font-size: 28rpx;
		padding: 38rpx 30rpx 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		height: 160rpx;
	}
	.rate .evaluate-con .score .textarea .list{
		margin-top: 25rpx;
		padding-left: 5rpx;
	}
	.rate .evaluate-con .score .textarea .list .pictrue2{
		border: 1rpx solid #ddd;
		box-sizing: border-box;
	}
	.rate .evaluate-con .score .textarea .list .pictrue{
		width: 140rpx;
		height: 140rpx;
		margin: 0 0 35rpx 25rpx;
		position: relative;
		font-size: 22rpx;
		color: #bbb;
	}
	.rate .evaluate-con .score .textarea .list .pictrue image{
		border-radius: 3rpx;
	}
	.rate .evaluate-con .score .textarea .list .pictrue .icon-icon25201{
		color: #bfbfbf;
		font-size: 50rpx;
	}
	.rate .evaluate-con .score .textarea .list .pictrue .icon-guanbi1{
		font-size: 45rpx;
		position: absolute;
		top: -20rpx;
		right: -20rpx;
	}
	.rate .evaluate-con .score .evaluateBnt{
		font-size: 30rpx;
		color: #fff;
		width: 690rpx;
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
		margin-top: 45rpx;
	}
</style>
